<template lang="pug">
  div
    el-card.tableFilter(:body-style="{padding: '0 10px'}")
      div(slot="header" class="boxHeader") 设备{{pageType === '1' ? '详情' : id ? '修改' : '添加'}}
      form-box(
        v-if="pageType === '0'"
        ref="form"
        :items="items"
        :layoutCol="{sm: 24, md: 12, lg: 8}"
        :submitting="submitting"
        size="large"
        :showBtns="false"
        @formChange="formChange"
        )
        el-row(slot="ipAddr")
          el-col(:span="10")
            ip-input(size="large" :value="ipAddr1" @valChange="val => ipAddrChange(1, val)")
          el-col.tc(:span="1") -
          el-col(:span="10")
            ip-input(size="large" :value="ipAddr2" @valChange="val => ipAddrChange(2, val)")
          el-col(:span="24")
            small.c_secondary IP起始地址和结束地址必须在同一C类地址中。若为单个ip地址，则只填写左侧一栏，右侧空出不填。
      .mb16(v-if="pageType === '1'")
        form-info(
          :items="items"
        )
    affix
      el-card.mt12.tr
        el-button(@click="$router.go(-1)" size="small") 返回
        el-button(type="primary" size="small" @click="submitHandle") 保存
</template>
<script>
import { FormBox, Affix, FormInfo } from '@/components'
import IpInput from '@/components/Form/IpInput'
import { registerInfo, registerSave } from '@/api/device'

export default {
  components: {
    FormBox,
    IpInput,
    FormInfo,
    Affix
  },
  computed: {
    pageType () {
      // 0-表单，1-详情
      return this.$route.query.type || '0'
    },
    id () {
      return this.$route.query.id || ''
    },
    items () {
      const { info } = this
      const baseItems = [
        {
          key: 'devName',
          label: '设备名称',
          initialValue: info.devName,
          rules: [{ required: true, message: '请输入' }]
        },
        {
          key: 'devCode',
          label: '设备编号',
          initialValue: info.devCode,
          rules: [{ required: true, message: '请输入' }]
        },
        {
          key: 'devPrdr',
          label: '设备厂商',
          initialValue: info.devPrdr,
          type: 'selectdict',
          dictKey: 'SCEN_DEV_PRDR',
          rules: [{ required: true, message: '请选择' }]
        },
        {
          key: 'joinCntr',
          label: '接入协议',
          initialValue: info.joinCntr,
          rules: [{ required: true, message: '请选择' }],
          type: 'selectdict',
          dictKey: 'SCEN_JOIN_CNTR'
        },
        {
          key: 'devClassify',
          label: '设备大类',
          initialValue: info.devMajcls,
          rules: [{ required: true, message: '请选择' }],
          changeHandle: value => { this.devClassify = value },
          type: 'selectdict',
          dictKey: 'SCEN_DEV_MAJCLS'
        },
        {
          key: 'devType',
          label: '设备类型',
          initialValue: info.devType,
          rules: [{ required: true, message: '请选择' }],
          type: 'selectdict',
          dictKey: 'SCEN_DEV_TYPE'
        },
        {
          key: 'port',
          label: '端口号',
          initialValue: info.port,
          rules: [{ required: true, message: '请输入' }]
        },
        {
          key: 'orgIds',
          label: '所属机构',
          initialValue: (info.deptId || info.medinsId) ? [info.medinsId, info.deptId] : null,
          initName: (info.deptName || info.medinsName) ? info.medinsName + (info.deptName ? ('/' + info.info.deptName) : '') : null,
          type: 'orgselect',
          selectType: 2, // 机构选择二级联动，到科室
          rules: [{ required: true, message: '请选择' }]
        },
        {
          key: 'loginid',
          label: '设备账号',
          initialValue: info.loginid
        },
        {
          key: 'loginpwd',
          label: '登录密码',
          initialValue: info.loginpwd
        },
        {
          key: 'theirNet',
          label: '所属网络',
          type: 'selectdict',
          dictKey: 'SCEN_NET_TYPE',
          initialValue: info.theirNet,
          rules: [{ required: true, message: '请选择' }]
        },
        {
          key: 'abltCrtfBiz',
          label: '认证业务',
          type: 'selectdict',
          initialValue: info.abltCrtfBiz,
          dictKey: 'SCEN_CRTF_BIZ'
        },
        {
          key: 'ipAddr',
          label: 'IP地址',
          slot: true,
          type: 'ip',
          size: 'large',
          hidden: this.devClassify === '2',
          initialValue: info.ipAddr,
          layoutCol: { xm: 24, md: 24, lg: 24 },
          help: 'IP起始地址和结束地址必须在同一C类地址中。若为单个ip地址，则只填写左侧一栏，右侧空出不填。',
          rules: [{ required: true, message: '请输入' }]
        }
      ]
      const cameraItems = [
        {
          key: 'camaIndxCode',
          label: '监控点标识',
          initialValue: info.camaIndxCode,
          rules: [{ required: true, message: '请输入' }]
        },
        {
          key: 'streamUrl',
          label: '实时流地址',
          initialValue: info.streamUrl,
          layoutCol: { xm: 24, md: 24, lg: 24 },
          rules: [{ required: true, message: '请输入' }]
        }
      ]
      if (this.devClassify === '2') {
        return baseItems.concat(cameraItems)
      } else {
        return baseItems
      }
    }
  },
  data () {
    return {
      info: {},
      devClassify: '',
      ipAddr1: '',
      ipAddr2: '',
      submitting: false
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    // 获取详情
    getInfo () {
      if (this.id) {
        registerInfo(this.id).then(res => {
          this.info = res
        })
      }
    },
    formChange ({ value, key }) {
      this.info[key] = value
    },
    // ip地址输入
    ipAddrChange (type, val) {
      this['ipAddr' + type] = val
    },
    submitHandle () {
      this.$refs.form.submitForm().then(values => {
        const { id, ipAddr1, ipAddr2 } = this
        console.log(values)
        if (values.devClassify !== '2' && (!ipAddr1 || !ipAddr2)) {
          this.$error('请输入ip地址')
          return
        }
        const params = {
          ...values,
          medinsId: values.orgIds[0],
          deptId: values.orgIds[1],
          ipAddr1: ipAddr1,
          ipAddr2: ipAddr2
        }
        delete params.orgIds
        this.submitting = true
        registerSave({ ...params, id }).then(() => {
          this.$success('保存成功')
          this.$router.go(-1)
        }).finally(() => {
          this.submitting = false
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
